<template>
	<div>
		<div class="isMask">
			<div class="isMask_mask" @click="cancleAddress"></div>
			<div class="isMask_content" @click="">
				<div class="isMask_header">
					<text class="isMask_header_title">配送至</text>
                    <text @click="cancleAddress" class="isMask_header_icon">&#xe61a;</text>
				</div>
				<div class="isMask_content_box">
					<div class="isMask_content_item" :key="item" v-for="item in addressInfo" @click="addressChoose(item)">
						<text class="iconfont icon-daohang isMask_content_item_Icon"></text>
						<text class="isMask_content_item_title">{{item.area}}{{item.address}}</text>
					</div>
					<div class="isMask_content_item" @click="addressClick">
                        <text class="icon">&#xe62d;</text>
						<text class="isMask_content_item_title">新增配送地址</text>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: '',
		props: ['addressInfo'],
		data() {
			return {}
		},
		created() { // 在实例创建完成后被立即调用
            this.initIconFont()
		},
		methods: {
			cancleAddress() {
				this.$emit('cancleAddress')
			},
			addressChoose(data){
				this.$emit('addressChoose',data)
			},
            addressClick() {
                if (this.getGlobalData().token != null){
                    eeui.openPage({
                        url: 'root://pages/member/address/address.js',
                        params: 'product',
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    }, (result) => {
                        console.log(result)
                        if (result.status == 'stop') {
                            this.$emit('refreshClick')
                        }
                    })

                }else{
                    eeui.openPage({
                            url: 'root://pages/login/msgLogin.js',
                            statusBarType: 'immersion',
                            statusBarStyle: false
                        },
                        (result) => {

                        }
                    );
                }
            }

		},
		components: {

		},
	}
</script>

<style scoped>
	.isMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* background-color: rgba(0, 0, 0, 0.3) */
	}

	.isMask_mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3)
	}

	.isMask_content {
		width: 750px;
		min-height: 600px;
		max-height: 1000px;
		background-color: white;
		position: fixed;
		bottom: 0;
		border-top-right-radius: 16px;
		border-top-left-radius: 16px
	}

	.isMask_header {
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-color:rgba(0, 0, 0, 0.3) ;
		border-bottom-width: 1px;
		border-style: solid;
	}

	.isMask_header_title {
		font-size: 26px;
	}
	.icon{
        font-family: iconfont2;
		color: rgba(0, 0, 0, 0.5);
        font-size: 36px;
	}
	.isMask_header_icon {
		padding-left: 50px;
        font-family: iconfont2;
        font-size: 32px;
	}

	.isMask_content_box {
		/* margin-top: 20px; */
		/* padding: 20px; */
		box-sizing: border-box;
	}

	.isMask_content_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		border-color:rgba(0, 0, 0, 0.3) ;
		border-bottom-width: 1px;
		border-style: solid;
	}

	.isMask_content_item_Icon {
		font-size: 50px;
		color: rgba(0, 0, 0, 0.3);
		line-height: 52px;
	}

	.isMask_content_item_title {
		font-size: 24px;
		color: rgba(0, 0, 0, 0.7);
        width: 700px;
		display: block;
		/*margin-left: 10px;*/
		line-height: 50px;
	}
</style>
